<template>
  <view class="custom-model" v-if="visible">
    <view class="custom-model-mask" @click="close"></view>
    <view class="custom-model-content">
      <form>
        <view v-for="(item, idx) in formConfig" :key="idx" class="form-item">
          <text class="label">{{ item.label }}</text>
          <view class="inputBox">
            <view class="qz" v-if="item.type === 'phone'">+966</view>
            <input
              class="form-input"
              v-model="formData[item.key]"
              :placeholder="item.placeholder || ''"
              type="text"
            />
          </view>
        </view>
        <view class="optBox">
          <button @click="close" size="mini">{{ t("Cancel") }}</button>
          <button @click="onSubmit" size="mini">{{ t("Save") }}</button>
        </view>
      </form>
    </view>
  </view>
</template>

<script setup>
import { ref, watch, defineProps, defineEmits } from "vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const props = defineProps({
  visible: Boolean,
  formConfig: {
    type: Array,
    default: () => [],
  },
});
const emits = defineEmits(["hide", "submit"]);
const formData = ref({});
watch(
  () => props.formConfig,
  (cfg) => {
    const obj = {};
    (cfg || []).forEach((item) => {
      obj[item.key] = "";
    });
    formData.value = obj;
  },
  { immediate: true }
);
const close = () => {
  emits("hide", false);
};
const onSubmit = () => {
  emits("submit", formData.value);
};
</script>

<style lang="scss" scoped>
.optBox {
  display: flex;
  justify-content: flex-end;
  button {
    background: none;
    border: none;
    color: #1aad19;
    margin: 0;
    &::after {
      display: none;
    }
  }
}
.custom-model {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.custom-model-mask {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
}
.custom-model-content {
  position: relative;
  background: #fff;
  border-radius: 12rpx;
  padding: 40rpx 32rpx;
  min-width: 500rpx;
}
.form-item {
  margin-bottom: 24rpx;
  border-bottom: 3px solid #1aad19;
  .label {
    opacity: 0.5;
    font-size: 25rpx;
  }
  .inputBox {
    margin-top: 8rpx;
    display: flex;
    align-items: center;
    .qz {
      font-weight: bold;
    }
  }
}
.form-input {
  width: 100%;
  padding: 12rpx;
}
</style>
